<template>
  <div class="container1">
    <!-- 展示区域 -->
    <div class="screen" ref="screen">
      <div class="top">
        <Top/>
      </div>
      <div class="bottom">
         <!-- 左侧子组件 -->
        <div class="b-left">
          <Tourist class="tourist" />
          <Sex class="sex" />
          <Age class="age" />
        </div>
        <!-- 中间子组件 -->
        <div class="b-mid">
          <Map class="map" />
          <Line class="line" />
        </div>
        <!-- 中右侧子组件 -->
        <div class="b-right">
          <Rank class="rank" />
          <Year class="year"/>
          <Counter class="counter" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from 'vue'
// 引入组件
import Top from './components/top/index.vue'
// 左侧子组件
import Tourist from './components/tourist/index.vue'
import Sex from './components/sex/index.vue'
import Age from './components/age/index.vue'
// 引入中间子组件
import Map from './components/map/index.vue'
import Line from './components/line/index.vue'
// 引入右侧子组件
import Rank from './components/rank/index.vue'
import Year from './components/year/index.vue'
import Counter from './components/counter/index.vue'


//把显示内容放在正中间
const screen = ref()
// 定义大屏缩放比例
const getScale = (w=1920, h=1080) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww<wh?ww:wh
}

onMounted(()=>{
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}) 

// 监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}





</script>

<style lang="scss" scoped>
  .container1 {
    width: 100vw;
    height: 100vh;
    background: url(./images/bg.png) no-repeat;
    background-size: cover;
    .screen {
      width: 1920px;
      height: 1080px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform-origin: left top;
      // background: yellow;
      .top {
        width: 100%;
        height: 40px;
      }
      .bottom {
        display: flex;
        .b-left, .b-right {
          flex: 1;
          height: 1040px;
        }
        .b-mid {
          flex: 2;
          display: flex;
          flex-direction: column;
          margin: 0 15px;
          .map {
            flex: 3;
          }
          .line {
            flex: 1;
          }
        }
        .b-left {
          display: flex;
          flex-direction: column;
          .tourist {
            flex: 1.3;
            margin-bottom: 15px;
          }
          .sex {
            flex: 1;
            margin-bottom: 15px;
          }
          .age {
            flex: 1;
          }
        }
        .b-right {
          display: flex;
          flex-direction: column;
          .rank {
            flex: 1.3;
            margin-bottom: 15px;
          }
          .year {
            flex: 1;
            margin-bottom: 15px;
          }
          .counter {
            flex: 1;
          }
        }
      }
    }
  }
</style>
